<template>
  <div
    class="engineering-manage-container animate__animated"
    :class="[visible ? 'animate__zoomIn' : 'animate__zoomOut']"
  >
    <div class="large-screen-body">
      <div class="left-container">
        <div class="card-container">
          <div class="card-header">年度基建计划总投资</div>
          <div class="card-body total-planned-investment">
            <div class="planned-icon"></div>
            <div class="planned-body">
              <div class="number">
                {{ investmentSource.total[0] || 0 }}
              </div>
              <div class="number">
                {{ investmentSource.total[1] || 0 }}
              </div>
              <div class="cut"></div>
              <div class="number">
                {{ investmentSource.total[2] || 0 }}
              </div>
              <div class="number">
                {{ investmentSource.total[3] || 0 }}
              </div>
              <div class="unit">亿元</div>
            </div>
          </div>
        </div>
        <div class="card-container">
          <div class="card-header">已开工实际总投资</div>
          <div class="card-body actual-total-investment">
            <div class="planned-icon"></div>
            <div class="planned-body">
              <div class="number">{{ investmentSource.reality[0] || 0 }}</div>
              <div class="number">
                {{ investmentSource.reality[1] || 0 }}
              </div>
              <div class="cut"></div>
              <div class="number">{{ investmentSource.reality[2] || 0 }}</div>
              <div class="number">{{ investmentSource.reality[3] || 0 }}</div>
              <div class="unit">亿元</div>
            </div>
          </div>
        </div>
        <div class="card-container">
          <div class="card-header">工程创新成果统计</div>
          <div class="card-body engineering-construction">
            <div
              class="engineering-item"
              v-for="(item, index) in constructSoucre"
              :key="index"
            >
              <div class="label">{{ item.name }}</div>
              <div class="value">{{ item.num }}</div>
            </div>
          </div>
        </div>
        <div class="card-container">
          <div class="card-header">季度检查情况</div>
          <div class="card-body quarterly-inspection">
            <div class="unit">单位：个</div>
            <div class="chart-dom" ref="bar-chart"></div>
          </div>
        </div>
      </div>
      <div class="center-container">
        <div class="card-container">
          <div class="card-header">关键线路进度达成情况</div>
          <div class="card-body line-situation">
            <carouselLine
              v-if="carousel.visible"
              :dataSoucre="peojectLineParams"
            ></carouselLine>
          </div>
        </div>
        <div class="card-container">
          <div class="number-devices">
            <div class="item">
              设备总数：<span>{{ lotOnlineParams.total || 0 }}</span
              >台
            </div>
            <div class="item">
              在线数：<span>{{ lotOnlineParams.online || 0 }}</span
              >台
            </div>
            <div class="item">
              离线数：<span>{{ lotOnlineParams.offline || 0 }}</span
              >台
            </div>
          </div>
          <div class="card-header">智慧工地物联网上线情况</div>
          <div class="card-body internet-things">
            <div
              class="internet-item"
              v-for="(item, index) in lotOnlineSoucre"
              :key="index"
            >
              <div class="round">
                <span>{{ item.total }}</span
                >/<span>{{ item.num }}</span>
              </div>
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="center-bottom">
          <div
            class="card-container"
            @click.stop="environmentModalVisible = true"
          >
            <div class="card-header">现场环境参数</div>
            <div class="card-body environment">
              <div class="device">
                <div>单位：{{ carousel.unit }}</div>
                <div class="device-state">
                  设备总数：
                  <span class="color_1"
                    >{{ environmentParams.total || 0 }} </span
                  >台 在线数：<span class="color_2">
                    {{ environmentParams.online || 0 }} </span
                  >台 离线数：<span class="color_3">{{
                    environmentParams.offline || 0
                  }}</span
                  >台
                </div>
              </div>
              <div class="sub-title">{{ carousel.name }}</div>
              <div class="chart-dom" ref="line-chart"></div>
              <div class="carousel">
                <div
                  :class="[carousel.index == 1 && 'active', 'carousel-item']"
                  @click.stop="handleCarousel(1)"
                ></div>
                <div
                  :class="[carousel.index == 2 && 'active', 'carousel-item']"
                  @click.stop="handleCarousel(2)"
                ></div>
                <div
                  :class="[carousel.index == 3 && 'active', 'carousel-item']"
                  @click.stop="handleCarousel(3)"
                ></div>
              </div>
            </div>
          </div>
          <div class="card-container">
            <div class="card-header">现场实时人数</div>
            <div class="card-body people">
              <div class="real-time-people" ref="real-time-people"></div>
              <div class="total-number">
                投入总人数：<span>{{ totalPeople }}</span
                >人
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-container">
        <div class="card-container">
          <div class="card-header">平台累计运行时间</div>
          <div class="card-body run-time">
            <div class="time">
              {{ substrinDate(runTime.days || "00")
              }}<span class="unit">天</span
              >{{ substrinDate(runTime.hours || "00")
              }}<span class="unit">小时</span
              >{{ substrinDate(runTime.minutes || "00")
              }}<span class="unit">分</span
              >{{ substrinDate(runTime.seconds || "00")
              }}<span class="unit">秒</span>
            </div>
            <div class="base"></div>
          </div>
        </div>
        <div class="card-container" @click="projectListModalVisible = true">
          <div class="card-header">累计项目统计</div>
          <div class="card-body accumulated-project-statistics">
            <div class="accumulated-icon">
              <div class="ani-icon"></div>
            </div>
            <div class="accumulated-body">
              <div class="sub-title">累计管理项目数</div>
              <div class="number-statistics">
                <div class="num-item">
                  {{ projectSoucre.projectCount[0] || 0 }}
                </div>
                <div class="num-item">
                  {{ projectSoucre.projectCount[1] || 0 }}
                </div>
                <div class="num-item">
                  {{ projectSoucre.projectCount[2] || 0 }}
                </div>
                <div class="unit">个</div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-container">
          <div class="card-header">在建项目统计</div>
          <div class="card-body under-project-statistics">
            <div class="unit">单位：个</div>
            <div class="bg"></div>
            <div class="border-text">
              <div class="total">{{ projectSoucre.yearBuild }}</div>
              <div class="pro">在建项目数</div>
            </div>
            <div class="chart-dom" ref="pie-chart"></div>
          </div>
        </div>
        <div class="card-container">
          <div class="card-header">本年度开工数</div>
          <div class="card-body year-start">
            <div class="accumulated-icon">
              <div class="ani-icon"></div>
            </div>
            <div class="accumulated-body">
              <div class="sub-title">本年度开工项目数</div>
              <div class="number-statistics">
                <div class="num-item">
                  {{ projectSoucre.yearStart[0] || 0 }}
                </div>
                <div class="num-item">
                  {{ projectSoucre.yearStart[1] || 0 }}
                </div>
                <div class="num-item">
                  {{ projectSoucre.yearStart[2] || 0 }}
                </div>
                <div class="unit">个</div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-container">
          <div class="card-header">本年度交工数</div>
          <div class="card-body year-handover">
            <div class="accumulated-icon">
              <div class="ani-icon"></div>
            </div>
            <div class="accumulated-body">
              <div class="sub-title">本年度交工项目数</div>
              <div class="number-statistics">
                <div class="num-item">
                  {{ projectSoucre.yearEnd[0] || 0 }}
                </div>
                <div class="num-item">
                  {{ projectSoucre.yearEnd[1] || 0 }}
                </div>
                <div class="num-item">
                  {{ projectSoucre.yearEnd[2] || 0 }}
                </div>
                <div class="unit">个</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <projectListModal
      :visible.sync="projectListModalVisible"
    ></projectListModal>
    <environmentListModal
      :visible.sync="environmentModalVisible"
    ></environmentListModal>
  </div>
</template>

<script>
import { axios } from "@/utils/request";
import echarts from "echarts";
import { statisticsQuarter } from "@/api/safetyManage";
import projectListModal from "./projectListModal";
import environmentListModal from "./environmentListModal";
import carouselLine from "./carouselLine";
export default {
  name: "EngineeringManage",
  components: {
    projectListModal,
    carouselLine,
    environmentListModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dotPosition: "left",
      //投资情况
      investmentSource: {
        total: [],
        reality: [],
      },
      //季度检查
      quarterInstance: null,
      projectSoucre: {
        projectCount: [],
        yearStart: [],
        yearEnd: [],
        yearBuild: 0,
      },
      //运行时间
      runTime: {},
      interval: null,
      //在建项目统计
      projectInstance: null,
      //建设情况
      constructSoucre: [],
      //环境参数
      environmentInstance: null,
      environmentSoucre: [],
      environmentParams: {},
      //物联网在线情况
      lotOnlineSoucre: [],
      lotOnlineParams: {},
      //总人数
      totalPeople: 0,
      //
      carousel: {
        name: "扬尘数据监测",
        index: 1,
        unit: "μg/m³",
        start: false,
        interval: null,
        visible: false,
      },
      projectListModalVisible: false,
      peojectLineParams: [],
      //现场实时人数
      realTimeInstance: null,
      environmentModalVisible: false,
    };
  },
  mounted() {
    this.interval = setInterval(() => {
      this.runTime = this.calculateTimeDifference(2024, 5, 18);
    }, 1000);
    this.getData();
  },
  methods: {
    getData() {
      Promise.all([
        this.getInvestmentData(),
        this.getQuarterStatisticsData(),
        this.getStaffStatics(),
        this.getProjectData(),
        this.getProjectLineData(),
      ]);
    },

    //人员投入情况
    getStaffStatics() {
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/bigScreen/staffInputStatics`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            //实时总人数
            this.totalPeople = res?.totalNum ?? 0;
            this.$nextTick((_) => {
              setTimeout(() => {
                //现场实时人数
                this.realTimePeopleDrawLineChart(res ?? {});
              }, 300);
            });
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },

    handleCarousel(index) {
      this.carousel.index = index;
      this.environmentInstance && this.environmentInstance.clear();
      let { chartData, chartData1, chartData2 } = this.environmentParams;
      switch (index) {
        case 1:
          this.environmentSoucre = chartData;
          this.carousel.name = "扬尘数据监测";
          this.carousel.unit = "μg/m³";
          break;
        case 2:
          this.environmentSoucre = chartData1;
          this.carousel.name = "噪音数据分析";
          this.carousel.unit = "dB";
          break;
        case 3:
          this.environmentSoucre = chartData2;
          this.carousel.name = "现场温、湿度数据监测";
          this.carousel.unit = "°C/%RH";
          break;
        default:
          break;
      }
      setTimeout(() => {
        this.environmentDrawLineChart();
      }, 300);
    },
    //现场环境参数 轮播
    startCarousel() {
      this.carousel.interval = setInterval(() => {
        this.carousel.index++;
        if (this.carousel.index > 3) {
          this.carousel.index = 1;
        }
        this.handleCarousel(this.carousel.index);
      }, 30000);
      //60000;
    },

    substrinDate(str = "") {
      let date = str.toString().slice(1);
      return date < 10 ? "0" + date : date;
    },
    //平台累计运行时间
    calculateTimeDifference(year, month, day) {
      var targetDate = new Date(year, month - 1, day);
      var currentDate = new Date();

      var timeDifference = targetDate.getTime() - currentDate.getTime();

      var seconds = Math.floor(timeDifference / 1000);
      var minutes = Math.floor(seconds / 60);
      var hours = Math.floor(minutes / 60);
      var days = Math.floor(hours / 24);

      seconds = seconds % 60;
      minutes = minutes % 60;
      hours = hours % 24;

      return {
        days: days,
        hours: hours,
        minutes: minutes,
        seconds: seconds,
      };
    },

    substringByDecimal(str = "") {
      let parts = str.toString().split(".");
      let obj = {};
      if (parts?.[0] < 10) {
        obj.total = "0" + parts?.[0];
      } else {
        obj.total = parts?.[0];
      }
      if (parts?.[1]) {
        let str = Array.from(parts?.[1]);
        obj.total = obj.total + str.join("");
      }
      return Array.from(obj.total);
    },
    //投资情况
    getInvestmentData() {
      return new Promise((resolve, reject) => {
        axios
          .get(
            `/probusiness/bigScreen/investmentSituation`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.investmentSource.total = this.substringByDecimal(
              data.yearPlanInvestment
            );
            this.investmentSource.reality = this.substringByDecimal(
              data.yearCompleteInvestment
            );
            resolve();
          })
          .catch((_) => {
            this.investmentSource.total = [];
            this.investmentSource.reality = [];
            reject();
          });
      });
    },

    //查询季度检查数据
    getQuarterStatisticsData() {
      return new Promise((resolve, reject) => {
        statisticsQuarter({
          checkName: "",
          checkType: "",
          year: "",
        })
          .then((res) => {
            let { data } = res;
            this.$nextTick((_) => {
              setTimeout(() => {
                this.quarterlyDrawBarChart(data ?? []);
              }, 300);
            });
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    substringByProject(str = "") {
      let parts = Array.from(str.toString());
      let obj = {};
      if (parts.length == 1) {
        obj.total = "0" + "0" + parts?.[0];
      } else if (parts.length == 2) {
        obj.total = "0" + parts?.[0] + parts?.[1];
      } else if (parts.length == 3) {
        obj.total = parts?.[0] + parts?.[1] + parts?.[2];
      }
      return Array.from(obj.total);
    },

    //查询线路数据
    getProjectLineData() {
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/portcommon/scheduleMilestoneProject/queryProjectList`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.peojectLineParams = res?.data ?? [];
            this.carousel.visible = true;
            resolve();
          })
          .catch((_) => {
            this.peojectLineParams = [];
            reject();
          });
      });
    },

    //查询项目数据
    getProjectData() {
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/bigScreen/projectStatisticsManagePlatform`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.projectSoucre.yearBuild = data.yearBuild;

            this.projectSoucre.projectCount = this.substringByProject(
              data?.projectCount ?? ""
            );

            this.projectSoucre.yearStart = this.substringByProject(
              data?.yearPlanStart ?? ""
            );

            this.projectSoucre.yearEnd = this.substringByProject(
              data?.yearPlanEnd ?? ""
            );
            this.constructSoucre = data?.constructionSituation ?? [];
            //物联网在线情况
            this.lotOnlineSoucre = data?.lotOnlineSituation?.list ?? [];
            this.lotOnlineParams = data?.lotOnlineSituation ?? {};
            //现场环境人数
            this.environmentParams = data?.environmentParams ?? {};
            this.environmentSoucre = this.environmentParams?.chartData ?? [];
            this.$nextTick((_) => {
              setTimeout(() => {
                //在建项目
                this.underProjectDrawPieChart(data?.areaDataList ?? []);
                //现场环境参数
                this.environmentDrawLineChart();
                this.startCarousel();
              }, 300);
            });
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },

    //季度检查情况
    quarterlyDrawBarChart(data = []) {
      let chartDom = this.$refs["bar-chart"];
      this.quarterInstance = echarts.init(chartDom);
      let yData = [],
        data_1 = [],
        data_2 = [],
        data_3 = [];
      data.forEach((v) => {
        if (v.total != 0) {
          yData.push(v.name);
          data_1.push(v.total);
          data_2.push(v.complete);
          data_3.push(v.notComplete);
        }
      });
      let option = {
        tooltip: {
          show: false,
          trigger: "axis",
          backgroundColor: "rgba(0,60,122,0.9)",
          borderWidth: 0,
          padding: [10, 10, 10, 10],
          textStyle: {
            color: "#76AEC6",
            fontSize: 14,
          },
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: 46,
          bottom: 10,
          left: 70,
          right: 40,
        },
        legend: {
          top: 22,
          left: "center",
          itemWidth: 18,
          itemHeight: 8,
          textStyle: {
            color: "#76AEC6",
            fontSize: 12,
          },
        },
        xAxis: {
          type: "value",
          //坐标轴在 grid 区域中的分隔线
          splitLine: {
            show: false,
          },
          //坐标轴刻度相关设置
          axisTick: {
            show: false,
          },
          //坐标轴轴线相关设置
          axisLine: {
            show: false,
          },
          //坐标轴刻度标签的相关设置
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: yData,
          //坐标轴刻度标签的相关设置
          axisLabel: {
            color: "#76AEC6",
            fontSize: 14,
          },
          //坐标轴在 grid 区域中的分隔线
          splitLine: {
            show: false,
          },
          //坐标轴刻度相关设置
          axisTick: {
            show: false,
          },
          //坐标轴轴线相关设置
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: "问题数",
            data: data_1,
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: [0, 3, 3, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                  {
                    offset: 0,
                    color: "rgba(16, 64, 96, 0)",
                  },
                  {
                    offset: 1,
                    color: "rgba(50, 129, 205, 1)",
                  },
                ]),
                label: {
                  show: true,
                  position: "right",
                  textStyle: {
                    //数值样式
                    color: "#419FFF",
                    fontSize: 14,
                  },
                },
              },
            },
          },
          {
            name: "已回复",
            data: data_2,
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: [0, 3, 3, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                  {
                    offset: 0,
                    color: "rgba(2, 82, 93, 0)",
                  },
                  {
                    offset: 1,
                    color: "rgba(1, 208, 211, 1)",
                  },
                ]),
                label: {
                  show: true,
                  position: "right",
                  textStyle: {
                    //数值样式
                    color: "#00FFFF",
                    fontSize: 14,
                  },
                },
              },
            },
          },
          {
            name: "未回复",
            data: data_3,
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: [0, 3, 3, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                  {
                    offset: 0,
                    color: "rgba(60, 82, 49, 0)",
                  },
                  {
                    offset: 1,
                    color: "rgba(200, 178, 35, 1)",
                  },
                ]),
                label: {
                  show: true,
                  position: "right",
                  textStyle: {
                    //数值样式
                    color: "#FFD71E",
                    fontSize: 14,
                  },
                },
              },
            },
          },
        ],
      };
      option && this.quarterInstance.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.quarterInstance.resize();
      });
    },

    //在建项目统计
    underProjectDrawPieChart(data = []) {
      let chartDom = this.$refs["pie-chart"];
      this.projectInstance = echarts.init(chartDom);
      var trafficWay = [];

      data.forEach((v) => {
        trafficWay.push({
          name: v.name,
          value: v.num,
          code: v.code,
        });
      });
      var data = [];
      var color = ["#00D5FF", "#1BF8C3", "#7676E4", "#419FFF", "#FFA500"];
      trafficWay.reverse();

      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 4,
                shadowBlur: 4,
                borderRadius: 20, // 圆角
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 0.5,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      let option = {
        color: color,
        tooltip: {
          show: false,
        },
        legend: {
          itemWidth: 8,
          itemHeight: 8,
          icon: "circle",
          top: "center",
          left: "56%",
          itemGap: 10,
          textStyle: {
            color: "#9CD4F6",
            fontSize: 14,
            rich: {
              a: {
                verticalAlign: "middle",
              },
              num: {
                color: "#B8F3FF",
                fontSize: 16,
              },
            },
          },
          formatter: (name) => {
            let item = trafficWay.filter((v) => v.name == name)[0];
            let { code, value } = item;
            let str = "";
            if (code == "workArea.01") {
              str = `${name} {num|${value}}`;
            } else {
              str = `${name}    {num|${value}}`;
            }
            return str;
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            hoverAnimation: false,
            clockWise: false,
            radius: [54, 59],
            center: ["28.8%", "53%"],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
            },
            data: data,
          },
        ],
      };
      option && this.projectInstance.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.projectInstance.resize();
      });
    },

    //现场环境参数
    environmentDrawLineChart() {
      let { x = [], y = [], y1 = [] } = this.environmentSoucre;
      let { index } = this.carousel;

      let chartDom = this.$refs["line-chart"];
      this.environmentInstance = echarts.init(chartDom);

      let series = [],
        color = [];
      switch (index) {
        case 1:
          color = ["#F4AFFE", "#F7F753"];
          series = [
            {
              name: "PM10",
              type: "line",
              smooth: true,
              showSymbol: false,
              data: y,
              //折线样式
              lineStyle: {
                color: "#F4AFFE",
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(244, 175, 254, 0.5)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(244, 175, 254, 0)",
                      },
                    ],
                    false
                  ),
                },
              },
            },
            {
              name: "PM2.5",
              type: "line",
              smooth: true,
              showSymbol: false,
              data: y1,
              //折线样式
              lineStyle: {
                color: "#F7F753",
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(247, 247, 83, 0.5)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(247, 247, 83, 0)",
                      },
                    ],
                    false
                  ),
                },
              },
            },
          ];
          break;
        case 2:
          color = ["#fa7070"];
          series = [
            {
              name: "噪音",
              type: "line",
              smooth: true,
              showSymbol: false,
              data: y,
              //折线样式
              lineStyle: {
                color: "#fa7070",
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(250, 112, 112, 0.5)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(250, 112, 112, 0)",
                      },
                    ],
                    false
                  ),
                },
              },
            },
          ];
          break;
        case 3:
          color = ["#f7f753", "#00d5ff"];
          series = [
            {
              name: "温度",
              type: "line",
              smooth: true,
              showSymbol: false,
              data: y,
              //折线样式
              lineStyle: {
                color: "#f7f753",
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(247, 247, 83, 0.5)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(247, 247, 83, 0)",
                      },
                    ],
                    false
                  ),
                },
              },
            },
            {
              name: "湿度",
              type: "line",
              smooth: true,
              showSymbol: false,
              data: y1,
              //折线样式
              lineStyle: {
                color: "#00d5ff",
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(0, 213, 255, 0.5)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(0, 213, 255, 0)",
                      },
                    ],
                    false
                  ),
                },
              },
            },
          ];
          break;
        default:
          break;
      }
      let option = {
        color: color,
        grid: {
          top: 64,
          bottom: 56,
          left: 60,
          right: 20,
        },
        legend: {
          show: true,
          top: 34,
          right: 10,
          textStyle: {
            color: "#B8F3FF",
            fontSize: 12,
          },
        },
        xAxis: {
          type: "category",
          data: x,
          //坐标轴轴线相关设置
          axisLine: {
            lineStyle: {
              color: "rgba(68,97,108, 1)",
            },
          },
          //坐标轴刻度相关设置
          axisTick: {
            show: false,
          },
          //坐标轴在 grid 区域中的分隔线
          splitLine: {
            show: false,
          },
          //坐标轴刻度标签的相关设置
          axisLabel: {
            color: "#76AEC6",
            fontSize: 14,
            rotate: 25,
          },
        },
        yAxis: {
          type: "value",
          //坐标轴轴线相关设置
          axisLine: {
            lineStyle: {
              color: "rgba(68,97,108, 1)",
            },
          },
          //坐标轴刻度相关设置
          axisTick: {
            show: false,
          },
          //坐标轴刻度标签的相关设置
          axisLabel: {
            color: "#76AEC6",
            fontSize: 14,
          },
          //坐标轴在 grid 区域中的分隔线
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(219, 241, 255,0.35)",
            },
          },
        },
        series: series,
      };

      option && this.environmentInstance.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.environmentInstance.resize();
      });
    },

    //现场实时人数
    realTimePeopleDrawLineChart(data = {}) {
      let chartDom = this.$refs["real-time-people"];
      this.realTimeInstance = echarts.init(chartDom);

      let option = {
        grid: {
          top: 40,
          bottom: 50,
          left: 60,
          right: 20,
        },
        legend: {
          show: false,
        },
        xAxis: {
          type: "category",
          data: data?.x || [],
          //坐标轴轴线相关设置
          axisLine: {
            lineStyle: {
              color: "rgba(68,97,108, 1)",
            },
          },
          //坐标轴刻度相关设置
          axisTick: {
            show: false,
          },
          //坐标轴在 grid 区域中的分隔线
          splitLine: {
            show: false,
          },
          //坐标轴刻度标签的相关设置
          axisLabel: {
            color: "#76AEC6",
            fontSize: 14,
            rotate: 25,
          },
        },
        yAxis: {
          name: "单位：人",
          nameTextStyle: {
            color: "#76AEC6",
            fontSize: 12,
            padding: [0, 20, 0, 0],
          },
          type: "value",
          //坐标轴轴线相关设置
          axisLine: {
            lineStyle: {
              color: "rgba(68,97,108, 1)",
            },
          },
          //坐标轴刻度相关设置
          axisTick: {
            show: false,
          },
          //坐标轴刻度标签的相关设置
          axisLabel: {
            color: "#76AEC6",
            fontSize: 14,
          },
          //坐标轴在 grid 区域中的分隔线
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(219, 241, 255,0.35)",
            },
          },
        },
        series: [
          {
            name: "实时人数",
            type: "line",
            smooth: true,
            showSymbol: false,
            data: data?.y || [],
            //折线样式
            lineStyle: {
              color: "#11FFB4",
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(17, 255, 180, 0.5)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(17, 255, 180, 0)",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      option && this.realTimeInstance.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.realTimeInstance.resize();
      });
    },
  },
  destroyed() {
    //清除定时器
    clearInterval(this.interval);
    this.interval = null;
    clearInterval(this.carousel.interval);
    this.carousel.interval = null;
    this.quarterInstance.dispose();
    this.projectInstance.dispose();
    this.environmentInstance.dispose();
    this.realTimeInstance.dispose();
  },
};
</script>

<style lang="less" scoped>
.engineering-manage-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 110px 0 0 0;
  overflow: hidden;
  .large-screen-body {
    height: 100%;
    padding: 0 40px;
    box-sizing: border-box;
    .custom-scrollbar();
    display: flex;
    .card-container {
      position: relative;
      display: flex;
      flex-direction: column;
      margin-bottom: 12px;
      .card-header {
        height: 36px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #fefe79;
        display: flex;
        align-items: center;
        padding-left: 44px;
      }
      .card-body {
        border-radius: 0px 0px 0px 8px;
        background: linear-gradient(
          to right,
          rgba(2, 25, 30, 0.2),
          rgba(0, 181, 217, 0.1)
        );
        border: 1px solid rgba(0, 213, 255, 0.3);
      }

      .number-devices {
        position: absolute;
        top: 10px;
        right: 50px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #8fdbfc;
        display: flex;
        align-items: center;
        .item {
          span {
            color: #00d5ff;
            font-size: 16px;
          }
          padding-right: 50px;
          &:nth-child(2) {
            span {
              color: #11ffb4;
            }
          }
          &:nth-child(3) {
            span {
              color: #fa7070;
            }
          }
        }
      }
    }
    .left-container,
    .right-container {
      width: 300px;
      .card-container {
        .card-header {
          background: url("./images/header_1.png");
          background-size: 100% 100%;
        }
      }
      .total-planned-investment,
      .actual-total-investment {
        height: 92px;
        display: flex;
        align-items: center;
        padding: 0 12px;
        box-sizing: border-box;
        .planned-icon {
          width: 78px;
          height: 80px;
          background: url("./images/icon_1.png");
          background-size: 100% 100%;
        }
        .planned-body {
          flex: 1;
          display: flex;
          padding-left: 10px;
          .number {
            width: 34px;
            height: 52px;
            background: rgba(0, 213, 255, 0);
            border-radius: 4px;
            border: 1px solid rgba(172, 241, 255, 0.3);
            margin-right: 4px;
            font-family: D-DIN;
            font-weight: 400;
            font-size: 44px;
            color: rgba(0, 144, 255, 0);
            background: linear-gradient(
              0deg,
              #5cfcff 30.2001953125%,
              #ffffff 60.0341796875%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .unit {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #76aec6;
            display: flex;
            align-items: flex-end;
          }
          .cut {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #ebf3da;
            margin-right: 4px;
            position: relative;
            top: 38px;
          }
        }
      }
      .actual-total-investment {
        .planned-icon {
          background: url("./images/icon_2.png");
          background-size: 100% 100%;
        }
        .planned-body {
          .number {
            width: 34px;
            height: 52px;
            background: rgba(0, 213, 255, 0);
            border-radius: 4px;
            border: 1px solid rgba(172, 241, 255, 0.3);
            margin-right: 4px;
            font-family: D-DIN;
            font-weight: 400;
            font-size: 44px;
            color: rgba(0, 144, 255, 0);
            background: linear-gradient(
              0deg,
              #11ffb4 30.2001953125%,
              #ffffff 60.0341796875%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .cut {
            background: #b5ffec;
          }
        }
      }
      .engineering-construction {
        height: 212px;
        padding: 10px 36px 0 24px;
        box-sizing: border-box;
        .engineering-item {
          width: 100%;
          height: 50px;
          background: url("./images/icon_3.png");
          background-size: 100% 100%;
          display: flex;
          justify-content: space-between;
          padding: 8px 30px 0 46px;
          box-sizing: border-box;
          .label {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #8fdbfc;
          }
          .value {
            font-family: D-DIN;
            font-weight: 400;
            font-size: 18px;
            color: #01eaeb;
          }
          &:nth-child(2) {
            background: url("./images/icon_4.png");
            background-size: 100% 100%;
          }
          &:nth-child(3) {
            background: url("./images/icon_5.png");
            background-size: 100% 100%;
          }
          &:nth-child(4) {
            background: url("./images/icon_6.png");
            background-size: 100% 100%;
          }
        }
      }
      .quarterly-inspection {
        height: 212px;
        position: relative;
        .unit {
          position: absolute;
          top: 4px;
          left: 20px;
          z-index: 99;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #76aec6;
        }
        .chart-dom {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
      .run-time {
        height: 92px;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .time {
          font-family: D-DIN;
          font-weight: 400;
          font-size: 28px;
          color: #00ffff;
          .unit {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #76aec6;
            padding: 0 4px;
          }
        }
        .base {
          width: 100%;
          height: 14px;
          background: url("./images/icon_7.png");
          background-size: 100% 100%;
        }
      }

      @keyframes bounce {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }

      .accumulated-project-statistics,
      .year-start,
      .year-handover {
        height: 92px;
        padding: 0 32px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .accumulated-icon {
          position: relative;
          width: 70px;
          height: 70px;
          background: url("./images/icon_8.png");
          background-size: 100% 100%;
          .ani-icon {
            height: 38px;
            width: 38px;
            background: url("./images/icon_9.png");
            background-size: 100% 100%;
            position: absolute;
            left: 16px;
          }
        }
        .accumulated-body {
          padding-left: 20px;
          flex: 1;
          .sub-title {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #b8f3ff;
            padding-bottom: 10px;
          }
          .number-statistics {
            display: flex;
            .num-item {
              width: 32px;
              height: 42px;
              background: url("./images/icon_10.png");
              background-size: 100% 100%;
              margin-right: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-family: D-DIN;
              font-weight: 400;
              font-size: 34px;
              color: #93d5f8;
            }
            .unit {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 12px;
              color: #76aec6;
              position: relative;
              top: 20px;
            }
          }
        }
      }
      .under-project-statistics {
        height: 194px;
        position: relative;
        .bg {
          position: absolute;
          left: 16px;
          bottom: 20px;
          width: 138px;
          height: 92px;
          background: url("./images/icon_16.png") no-repeat center;
          background-size: 100% 100%;
        }
        .border-text {
          position: absolute;
          top: 58px;
          left: 42px;
          width: 88px;
          height: 88px;
          background: url("./images/icon_17.png") no-repeat center;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .total {
            font-family: D-DIN;
            font-weight: bold;
            font-size: 22px;
            color: #b8f3ff;
          }
          .pro {
            font-size: 12px;
            color: #76aec6;
          }
        }
        .chart-dom {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        .unit {
          position: absolute;
          top: 10px;
          left: 15px;
          z-index: 99;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #76aec6;
        }
      }
      .year-start {
        .accumulated-icon {
          background: url("./images/icon_11.png");
          background-size: 100% 100%;
          .ani-icon {
            background: url("./images/icon_12.png");
            background-size: 100% 100%;
          }
        }
        .accumulated-body {
          .number-statistics {
            .num-item {
              color: #8bf7f7;
            }
          }
        }
      }
      .year-handover {
        .accumulated-icon {
          background: url("./images/icon_13.png");
          background-size: 100% 100%;
          .ani-icon {
            background: url("./images/icon_14.png");
            background-size: 100% 100%;
          }
        }
        .accumulated-body {
          .number-statistics {
            .num-item {
              color: #8ff8c6;
            }
          }
        }
      }
    }
    @keyframes bounceround {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-6px);
      }
    }
    .center-container {
      flex: 1;
      max-width: 1240px;
      padding: 0 20px;
      box-sizing: border-box;
      .card-container {
        .card-header {
          background: url("./images/header_3.png");
          background-size: 100% 100%;
        }
      }
      .line-situation {
        overflow: hidden;
      }
      .internet-things {
        height: 228px;
        position: relative;
        &::before {
          content: "";
          height: 232px;
          width: 1004px;
          background: url("./images/icon_15.png");
          background-size: 100% 100%;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
        }
        .internet-item {
          position: absolute;
          text-align: center;
          .round {
            width: 88px;
            height: 88px;
            background: url("./images/round_1.png");
            background-size: 100% 100%;
            animation: bounce 2s infinite;
            display: flex;
            align-items: center;
            justify-content: center;

            span:nth-child(1) {
              font-family: D-DIN;
              font-weight: 400;
              font-size: 22px;
              color: rgba(57, 254, 131, 0);
              line-height: 34px;
              background: linear-gradient(0deg, #11ffb4 0%, #d2fff3 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            span:nth-child(2) {
              font-family: D-DIN;
              font-weight: 400;
              font-size: 16px;
              color: rgba(255, 215, 30, 0);
              line-height: 34px;
              background: linear-gradient(0deg, #f65757 0%, #ffd4d4 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
          .name {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #eef9ff;
          }
          &:nth-child(1) {
            top: 33px;
            left: 100px;
          }
          &:nth-child(2) {
            top: 100px;
            left: 232px;
            .round {
              background: url("./images/round_2.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(3) {
            top: 2px;
            left: 328px;
            .round {
              background: url("./images/round_3.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(4) {
            top: 114px;
            left: 436px;
            .round {
              background: url("./images/round_4.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(5) {
            top: 114px;
            right: 454px;
            .round {
              background: url("./images/round_1.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(6) {
            top: 2px;
            right: 326px;
            .round {
              background: url("./images/round_2.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(7) {
            top: 106px;
            right: 238px;
            .round {
              background: url("./images/round_3.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(8) {
            top: 34px;
            right: 96px;
            .round {
              background: url("./images/round_5.png");
              background-size: 100% 100%;
            }
          }
        }
      }
      .center-bottom {
        display: flex;
        .card-container {
          flex: 1;
          overflow: hidden;
          .card-header {
            background: url("./images/header_2.png");
            background-size: 100% 100%;
          }
          &:first-of-type {
            margin-right: 12px;
          }
          &:last-of-type {
            margin-left: 12px;
          }
        }
        .environment,
        .people {
          height: 210px;
          width: 100%;
          position: relative;
          .chart-dom {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
          }
          .device {
            padding: 8px 10px 10px 10px;
            box-sizing: border-box;
            position: absolute;
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #76aec6;
            .device-state {
              .color_1 {
                font-size: 14px;
                color: #00d5ff;
              }
              .color_2 {
                font-size: 14px;
                color: #11ffb4;
              }
              .color_3 {
                font-size: 14px;
                color: #fa7070;
              }
            }
          }
          .sub-title {
            position: absolute;
            padding-left: 24px;
            left: 10px;
            top: 30px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #11ffb4;
            &::before {
              content: "";
              width: 32px;
              height: 34px;
              background: url("./images/icon_18.png");
              background-size: 100% 100%;
              position: absolute;
              top: -6px;
              left: -10px;
            }
          }
          .carousel {
            z-index: 99;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            bottom: 6px;
            display: flex;
            align-items: center;
            .carousel-item {
              cursor: pointer;
              width: 6px;
              height: 6px;
              background: rgba(17, 255, 180, 0.4);
              border-radius: 50%;
              margin-right: 10px;
              &.active {
                background: #11ffb4;
              }
            }
          }

          .real-time-people {
            height: 100%;
            width: 100%;
            position: absolute;
          }
          .total-number {
            position: absolute;
            top: 10px;
            right: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #76aec6;
            span {
              font-size: 14px;
              color: #11ffb4;
            }
          }
        }
      }
    }
  }

  //自定义滚动条
  .custom-scrollbar {
    overflow: auto !important;
    // overflow-x: overlay !important;
    // overflow-y: overlay !important;
    //滚动条整体样式
    &::-webkit-scrollbar {
      width: 6px !important;
      height: 10px !important;
    }

    //滚动条里面小方块
    &::-webkit-scrollbar-thumb {
      border-radius: 10px !important;
      background: rgba(0, 213, 255, 0.3) !important;
    }

    //滚动条里面轨道
    &::-webkit-scrollbar-track {
      border-radius: 10px !important;
      background: rgba(0, 213, 255, 0.1) !important;
    }
    //边角，即两个滚动条的交汇处
    &::-webkit-scrollbar-corner {
      background: none !important;
    }
  }
}
</style>
